<template>
  <div :class="className">
    <div v-html="css"></div>
    <van-sticky :offset-top="datas.offsetTop">
      <van-tabs
        v-model="active"
        :background="datas.tab_bg_color"
        :color="datas.tab_active_color"
        :title-inactive-color="datas.tab_inactive_color"
        :title-active-color="datas.tab_active_color"
        @change="onChange"
      >
        <van-tab :title="item.name" v-for="(item, index) in tabArr" :key="index">
          <div class="returnPoint">
            <div class="cateTabs">
              <div class="cateTab" @click="tapSelectCate(index)" :class="{ cateTabSelect: cateTabIndex == index }" v-for="(item, index) in cateArr" :key="index">{{ item.name }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div class="returnPoint">
      <div class="goodList">
        <div class="lis" v-for="item in goods_list" :key="item.id" @click="toGood(item)">
          <div class="lisImg">
            <img :src="item.thumb" alt="" />
          </div>
          <div class="lis_b">
            <div class="lis_b_t">{{ item.title }}</div>
            <div class="lis_b_sales">销量 {{ item.real_sales }}</div>
            <div class="lis_b_c">
              <div class="lis_b_c_l">
                <div class="lis_b_c_l_p">¥ {{ item.price }}</div>
                <div class="lis_b_c_l_op" v-if="checkPrice(item)">¥{{ item.market_price }}</div>
              </div>
              <div class="lis_b_c_r">
                <i class="iconfont icon-gaiicon-"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 自定义样式
const css = function() {
  if (this.datas.preview_color) {
    const { preview_color, good_color, bug_btn_color, cate_bg_color, cate_inactive_color, cate_active_color } = this.datas;
    return `
      .component-${this.id} .returnPoint{
        background: ${preview_color};
      }
      .component-${this.id} .goodList .lis .lis_b .lis_b_t{
        color: ${good_color};
      }
      .component-${this.id} .goodList .lis .lis_b .lis_b_c .lis_b_c_r{
        border: 0.06rem solid ${bug_btn_color};
      }
      .component-${this.id} .goodList .lis .lis_b .lis_b_c .lis_b_c_r .iconfont{
        color: ${bug_btn_color};
      }
      .component-${this.id} .cateTabs{
        background: ${cate_bg_color};
      }
      .component-${this.id} .cateTab{
        color: ${cate_inactive_color};
      }
      .component-${this.id} .cateTabSelect{
        color: ${cate_active_color};
        border: 1rpx solid ${cate_active_color};
        position: relative;
      }
      .component-${this.id} .cateTabSelect::after{
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: ${cate_active_color};
        opacity: 0.1;
      }
    `;
  }
};
export default {
  data() {
    return {
      tabArr: [],
      active: 0,
      cateTabIndex: 0,
      cateArr: [],
      goods_list: [],
      page: 1,
      total_page: 0
    };
  },
  props: ["id", "datas", "tabcontrol", "isLast", "index", "plugin_active", "isBottom", "lastIndex"],
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    checkPrice(item) {
      return function(item) {
        if (Number(item.market_price) == 0) {
          return false;
        }
        if (Number(item.price) > Number(item.market_price)) {
          return true;
        }else{
          return false;
        }
      };
    }
  },
  watch: {
    isBottom: function(nval, oval) {
      if (this.lastIndex == this.index && nval) {
        this.getMoreDataList();
      }
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      if (this.datas.goods_type == "all") {
        let { data, msg, result } = await $http.post("plugin.return-point.frontend.supplier.activity-goods.get-activity-list", {}, ".");
        if (result == 1) {
          this.tabArr = data;
          this.getActive(this.tabArr[this.active].id);
        } else {
          this.$toast(msg);
        }
      } else {
        this.tabArr = this.datas.list;
        this.getActive(this.tabArr[this.active].id);
      }
    },
    async getActive(id) {
      let { data, msg, result } = await $http.post("plugin.return-point.frontend.activity.index", { activity_id: id }, ".");
      if (result) {
        this.cateArr = data.category;
        this.getGood();
      } else {
        this.$toast(msg);
      }
    },
    async getMoreDataList() {
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post(
          "plugin.return-point.frontend.activity.get-category-goods",
          { page: this.page, category_id: this.cateArr[this.cateTabIndex].id, get_number: this.datas.get_number },
          "."
        );
        if (result) {
          this.goods_list = data.data;
          this.total_page = data.last_page;
        } else {
          this.$toast(msg);
        }
      }
    },
    async getGood() {
      let { data, msg, result } = await $http.post(
        "plugin.return-point.frontend.activity.get-category-goods",
        { category_id: this.cateArr[this.cateTabIndex].id, get_number: this.datas.get_number },
        "."
      );
      if (result) {
        this.goods_list = data.data;
        this.total_page = data.last_page;
      } else {
        this.$toast(msg);
      }
    },
    onChange() {
      this.init();
      this.getActive(this.tabArr[this.active].id);
    },
    // 专区切换
    init() {
      this.page = 1;
      this.total_page = 0;
      this.cateArr = [];
      this.goods_list = [];
      this.cateTabIndex = 0;
    },
    // 分类切换
    tapSelectCate(index) {
      this.page = 1;
      this.total_page = 0;
      this.goods_list = [];
      this.cateTabIndex = index;
      this.getGood();
    },
    toGood(item) {
      this.$router.push(this.fun.getUrl("goods", { id: item.goods_id }, { return_point_id: item.return_point_id }));
    }
  }
};
</script>
<style lang="scss" scoped>
.cateTabs {
  display: flex;
  align-items: center;
  padding: 0.63rem 0.5rem 0.63rem 0.75rem;
  box-sizing: border-box;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    display: none; // 隐藏滚动条
  }
  .cateTab {
    flex-shrink: 0;
    font-size: 0.75rem;
    line-height: 1;
    margin-right: 0.5rem;
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.38rem 0.5rem;
    box-sizing: border-box;
  }
}
.goodList {
  display: grid;
  grid-template-columns: 10.66rem 10.66rem;
  grid-column-gap: 0.63rem;
  grid-row-gap: 0.63rem;
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  .lis {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-radius: 0.75rem;
    .lisImg {
      flex-shrink: 0;
      width: 10.66rem;
      height: 10.66rem;
      background: #c1c1c1;
      border-radius: 0.75rem 0.75rem 0 0;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.75rem 0.75rem 0 0;
      }
    }
    .lis_b {
      flex: 1;
      min-height: 6.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.63rem 0.63rem 0.75rem 0.75rem;
      overflow: hidden;
      text-align: left;
      .lis_b_t {
        font-weight: bold;
        font-size: 0.81rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.13rem;
      }
      .lis_b_sales {
        font-size: 0.81rem;
        color: #3b3b4a;
        line-height: 1;
        margin: 0.47rem 0 0.78rem 0;
      }
      .lis_b_c {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .lis_b_c_l {
          text-align: left;
          .lis_b_c_l_p {
            font-weight: 500;
            font-size: 0.94rem;
            color: #f15353;
            line-height: 1;
            margin-bottom: 0.19rem;
          }
          .lis_b_c_l_op {
            font-size: 0.75rem;
            color: #999999;
            line-height: 1;
          }
        }
        .lis_b_c_r {
          width: 1.5rem;
          height: 1.5rem;
          border: 0.06rem solid #f15353;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          .iconfont {
            font-size: 0.8rem;
            color: #f15353;
          }
        }
      }
    }
  }
}
</style>
